<style src="./statistics-s1.css"scoped ></style>
<template>
  <div class="back-activity">
    <a v-link="{path: '/'}" class="btn btn-sm btn-primary">返回活动</a>
  </div>
  <div class="sec-top">
    <div class="form-inline">
      <label>开始时间：</label>
      <vue-date-picker
      :time.sync="startDate"
      :option="datePickerOption">
      </vue-date-picker>
      <label>结束时间：</label>
      <vue-date-picker
      :time.sync="endDate"
      :option="datePickerOption">
      </vue-date-picker>
      <button class="btn btn-primary btn-sm" @click="search">搜索</button>
    </div>
  </div>
  <table class="table table-bordered table-hover">
    <caption>大转盘抽奖活动数据统计</caption>
    <thead>
      <tr>
        <th>日期</th>
        <th>活动参与人数</th>
        <th>贝塔豆消耗人数</th>
        <th>贝塔豆消耗量</th>
        <th>贝塔豆中奖人数</th>
        <th>贝塔豆中奖量</th>
        <th>课程中奖人数</th>
        <th>课程中奖量</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="item in list">
        <td>{{item.date}}</td>
        <td>{{item.total}}</td>
        <td>{{item.spendGoldUserNum}}</td>
        <td>{{item.spendGold}}</td>
        <td>{{item.goldUserNum}}</td>
        <td>{{item.gold}}</td>
        <td>{{item.courseUserNum}}</td>
        <td>{{item.courseNum}}</td>
      </tr>
    </tbody>
  </table>
</template>

<script type="text/javascript" src="./statistics-s1.js"></script>
